<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        	/* 书写样式
				选择标签{
					书写样式
				}
        	 */
        	body{
        		background:url('img/bg.jpg');
        		/* 引入背景图片 */
        		height:100%;
        		/* 设置高度百分比，参照物是父级(外层包裹的标签) */
        		background-size:100% 100%;
        		background-repeat:no-repeat;
        		/* 修改背景图片大小 */
        	}
        	html{
        		height:100%;
        	}
        	div{
        		width:400px;
        		height:100%;
				/* 背景 */
        		position: fixed;
        		left:50%;
        		transform:translateX(-50%);
        		/* 标签水平居中 */

        	}
			/* 通过class选择标签.+class名字 */
			.brack{
				position: absolute;
				left:50%;
				transform:translateX(-50%);
				/* 居中 */
				top:220px;
				/* 距离上边的留白 */
			}
			main{
				width:400px;
				height:400px;
				position: absolute;
				top:20px;
				background:url('img/fsw.png');
				background-size:400px 400px;
				animation:move 4s infinite linear;
			}
			.happy{
				position: absolute;
				left:50%;
				transform:translateX(-50%);
				top:140px;
			}
			main img{
				width:50px;
				height:70px;
				position:absolute;
				animation:reMove 4s infinite linear;
				transform-origin:center 0px;
			}

			main img:nth-of-type(1){
				left:-11px;
				top:193px;
			}
			main img:nth-of-type(2){
				left:43px;
				top:67px;
			}
			main img:nth-of-type(3){
				left:173px;
				top:15px;
			}
			main img:nth-of-type(4){
				left:305px;
				top:66px;
			}
			main img:nth-of-type(5){
				left:357px;
				top:189px;
			}
			main img:nth-of-type(6){
				left:317px;
				top:324px;
			}
			main img:nth-of-type(7){
				left:176px;
				top:376px;
			}
			main img:nth-of-type(8){
				left:38px;
				top:317px;
			}

			@keyframes move{
				0%{
					transform:rotate(0deg);
				}
				100%{
					transform:rotate(360deg);
				}
			}
			@keyframes reMove{
				0%{
					transform:rotate(360deg);
				}
				100%{
					transform:rotate(0deg);
				}
			}
        </style>
    </head>
    <body>
		<!-- body书写自己代码 -->
		<!-- div实现大块布局 -->
		<div>
			<!-- img+tab在页面中引入图片 src图片地址 class给标签取名字 -->
			<img src="img/bracket.png" alt="" class="brack">
			<main>
				<img src="img/boy.png">
				<img src="img/dog.png">
				<img src="img/girl.png">
				<img src="img/girls.png">
				<img src="img/hairboy.png">
				<img src="img/mimi.png">
				<img src="img/mudog.png" >
				<img src="img/shamegirl.png">
			</main>
			<img src="img/happy.png" alt="" class="happy">
		</div>
    </body>
</html>

<!-- 
	标签：引入页面结构
	<标签名></标签名>
	样式：标签的形式
 -->